// import PropTypes from 'prop-types'; //vite-plugin-eslint 里面
// import { useEffect, useState } from 'react';
// function Chat({title}) {
//   useEffect(() => {
//     console.log('进入',title);
//     // useEffect的清理工作
//     // 1. 卸载组件的时候，2. 下一次更新前，清理当前作用域
//     return ()=>{
//       console.log('退出',title);
//     }//进入之后，组件销毁，会返回执行清理函数
//     //下一次更新前，会返回执行清理函数
//   }, [title]);
//   return (<div>
//       hello chat {title}
//   </div>)
// }
// Chat.propTypes = {
//   title: PropTypes.string,
// };
// function App() {
//   const [title, setTitle] = useState('情感聊天室');
//   const [show,setShow] = useState(true);
//   function handleClick() {
//     setShow(!show);
//   }
//   const handleChange = () => {
//     if(title === '情感聊天室') {
//       setTitle('体育聊天室')
//     } else {
//       setTitle('情感聊天室')
//     }

//   }
//   return (
//     <div>
//       hello App
//       <button onClick={handleClick}>关闭聊天室</button>
//       <button onClick={handleChange}>切换聊天室</button>
//       {  show && <Chat title={title}></Chat>}
    
//     </div>
//   );
// }

// export default App;
// import { useEffect, useState } from "react"
// import PropTypes from 'prop-types'; //vite-plugin-eslint 里面
// function fetchChat(title) {
//   const delay = title === '情感聊天室' ? 2000 : 200
//   return new Promise((resolve)=>{
//     setTimeout(()=>{
//       resolve([
//         { id: 1, text: title + '1'},
//         { id: 2, text: title + '2'},
//         { id: 3, text: title + '3'}
//       ])
//     }, delay)
//   })
// }

// function Chat({ title }) {
//   const [list, setList] = useState([]) 
//   useEffect(() => {
//     let ignore = false
//     fetchChat(title).then((data)=>{
//       if(!ignore) {
//         console.log('111');
      
//         setList(data)
//       }
//     })
//     return () => {
//       console.log('222');
//       ignore = true//一开始进入情感 后 111 ，再切到销毁或者更新，会利用清理函数把还没有加载完的数据取消加载
//     }
//   }, [title])
//   return (
//     <div>
//       hello Chat
//       <ul>
//         { list.map((item) => <li key={item.id}>{item.text}</li>) }
//       </ul>
//     </div>
//   )
// }

// Chat.propTypes = {
//   title: PropTypes.string,
// };
// function App() {
//   const [show, setShow] = useState(true)
//   const [title, setTitle] = useState('情感聊天室')
//   const handleClick = () => {
//     setShow(false)
//   }
//   const handleChange = (e) => {
//     setTitle(e.target.value)
//   }
//   return (
//     <div>
//       hello App
//       <button onClick={handleClick}>关闭聊天室</button>
//       <select value={title} onChange={handleChange}>
//         <option value="情感聊天室">情感聊天室</option>
//         <option value="体育聊天室">体育聊天室</option>
//       </select>
//       { show && <Chat title={title} /> }
//     </div>
//   )
// }

// export default App
// useEffect 使用async await
import { useEffect, useState } from "react"
import PropTypes from 'prop-types'; //vite-plugin-eslint 里面
function fetchChat(title) {
  const delay = title === '情感聊天室' ? 2000 : 200
  return new Promise((resolve)=>{
    setTimeout(()=>{
      resolve([
        { id: 1, text: title + '1'},
        { id: 2, text: title + '2'},
        { id: 3, text: title + '3'}
      ])
    }, delay)
  })
}

function Chat({ title }) {
  const [list, setList] = useState([]) 
  useEffect(() => {
    let ignore = false
    async function fetchData() {
      const data = await fetchChat(title)
      if(!ignore) {
        setList(data)
      }   
    }
    fetchData()
    return () => {
      // ignore = true
    }
  }, [title])
  return (
    <div>
      hello Chat
      <ul>
        { list.map((item) => <li key={item.id}>{item.text}</li>) }
      </ul>
    </div>
  )
}
Chat.propTypes = {
  title: PropTypes.string,
};

function App() {
  const [show, setShow] = useState(true)
  const [title, setTitle] = useState('情感聊天室')
  const handleClick = () => {
    setShow(false)
  }
  const handleChange = (e) => {
    setTitle(e.target.value)
  }
  return (
    <div>
      hello App
      <button onClick={handleClick}>关闭聊天室</button>
      <select value={title} onChange={handleChange}>
        <option value="情感聊天室">情感聊天室</option>
        <option value="体育聊天室">体育聊天室</option>
      </select>
      { show && <Chat title={title} /> }
    </div>
  )
}

export default App
